<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.key"
          placeholder="请输入退款编号/订单号/姓名/手机号码"
          clearable
        ></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-date-picker
          v-model="dataForm.timer"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button @click="exportFun()" type="primary">导出</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="currentName" @tab-click="handleClick">
      <el-tab-pane label="退款成功" name="6"></el-tab-pane>
      <el-tab-pane label="退款失败" name="7"></el-tab-pane>
    </el-tabs>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      >
      </el-table-column>
  
           <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="创建时间"
      >
        <template slot-scope="scope">
          <div v-if="scope.row">
            {{ getStrTime(scope.row.createTime) }}
          </div>
        </template>
      </el-table-column>
          <el-table-column
        prop="reqsn"
        header-align="center"
        align="center"
        label="订单编号"
      >
      </el-table-column>
      <el-table-column
        prop="refundId"
        header-align="center"
        align="center"
        label="退款编号"
      >
      </el-table-column>
      <el-table-column
        prop="typeDescribe"
        header-align="center"
        align="center"
        label="会员信息"
        width="250"
      >
        <template slot-scope="scope">
          <div v-if="scope.row" class="info">
            <div class="img">
              <img :src="scope.row.orderInfo.memberInfo.avatarUrl" alt="" />
            </div>
            <div class="rightCo">
              <div class="title">
                {{ scope.row.orderInfo.memberInfo.nickName}}
              </div>
              <div class="phone">{{ scope.row.orderInfo.memberInfo.tel }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
    
      <el-table-column
        prop="updateTime"
        header-align="center"
        align="center"
        label="实收金额"
      >
       <template slot-scope="scope">
      {{scope.row.orderInfo.payMoney}}
      </template>
      </el-table-column>
       <el-table-column
        prop="refundMoney"
        header-align="center"
        align="center"
        label="退款金额"
      >
      </el-table-column>
       <el-table-column
        prop="updateTime"
        header-align="center"
        align="center"
        label="退款状态"
      >
       <template slot-scope="scope">
      <span>{{scope.row.orderStatus=='5'?'退款中':scope.row.orderStatus=='6'?'退款成功':'退款失败'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.orderStatus == 7"
            type="text"
            size="small"
            @click="implement(scope.row)"
            >执行></el-button>
          <el-button
            type="text"
            size="small"
            @click="toDetails(scope.row)"
            >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗, 详情 -->
    <order-info
      v-if="infoVisible"
      ref="orderInfo"
     @refreshDataList="getDataList"
    ></order-info>
  </div>
</template>

<script>
import AddOrUpdate from "./orderList-add-or-update";
import OrderInfo from "./orderList-info";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dataForm: {
        key: "",
        timer: ''
      },
      currentName:"6",
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      infoVisible:false
    };
  },
  components: {
    AddOrUpdate,
    OrderInfo
  },
  activated() {
    this.getDataList();
  },
  methods: {
    handleClick(){
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/admin/order/pageRefundList`),
        method: "post",
        data: this.$http.adornData({
          // endTime: 0,
          // startTime: 0,
          orderStatus:Number(this.currentName),
          pageNum: this.pageIndex,
          pageSize: 10,
          searchKey: this.dataForm.key,
        }),
      }).then(({ data }) => {
        if (data && data.code === '200') {
          this.dataList = data.list;
          console.log(data.list)
          this.totalPage = data.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    implement(item){
      this.$confirm('执行退款之后, 系统会对退款失败的再次发起退款?', '执行退款', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl("/admin/order/closeOrderAgain"),
          method: "put",
          data: this.$http.adornData({
            refundId:item.refundId
          }),
        }).then(({ data }) => {
          if (data && data.code === '200') {
            this.$message({
              type: 'success',
              message: '退款成功!',
              duration: 1500,
              onClose: () => {
                this.getDataList();
              },
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退款'
        });          
      });
    },
    exportFun() {
      this.$http({
        url: this.$http.adornUrl("/admin/order/exportRefundInfo"),
        method: "post",
        // responseType: 'arraybuffer',
        data: {
          endTime:'',
          startTime:'',
          pageNum: this.pageIndex,
          pageSize: 10,
          orderStatus: Number(this.currentName),
          searchKey: this.dataForm.key
        },
      }).then(({ data }) => {
        // console.log(data)
        if (data.code == "200") {
          // let blob = new Blob([data.data], {type:"application/force-download"}) // Blob 对象表示一个不可变、原始数据的类文件对象
          // let fileReader = new FileReader()   // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
          // fileReader.readAsDataURL(blob)
          //开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
          //  a.href =
          console.log(data);
          window.open(data.data);
          // fileReader.onload = (e) => {
          // let a = document.createElement('a')
          // a.download = `会员列表.xlsx`
          //  a.href = e.target.result
          // a.href = data.data
          // document.body.appendChild(a)
          // a.click()
          // document.body.removeChild(a)
          // }
        }
      });
    },
    // 打开详情弹窗
    toDetails(item){
      this.infoVisible = true;
      this.$nextTick(() => {
        this.$refs.orderInfo.init(item);
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/course/coursetype/delete"),
          method: "post",
          data: this.$http.adornData(ids, false),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              },
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.info {
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 40px;
    height: 40px;
    border: 1px solid #999;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .rightCo {
    .title {
      color: #333;
      font-size: 14px;
    }
    .phone {
      color: #333;
      font-size: 14px;
    }
  }
}
</style>
